<template>
  <div class="center-flex bind-container">
    <div class="bind-wrap">
      <img class="logo" src="/static/logo.png">

      <form class="form-container" @submit="formSubmit">
        <div class="form-item">
          <input v-model="phone" maxlength="11" placeholder-style="color: #999" name="phone" type="text" placeholder="请输入手机号">
          <div @click="getCode" class="get-code center-flex">{{num === 60 ? '获取验证码' : num}}</div>
        </div>

        <div class="form-item">
          <input v-model="code" placeholder-style="color: #999" name="code" type="text" placeholder="请输入验证码">
        </div>

        <button formType="submit" class="center-flex confirm-btn">绑定手机号</button>
      </form>
    </div>
  </div>
</template>

<script>
// import validate from 'kuan-utils/lib/validate';
import { phoneLogin, getCode } from '@/api/phone';
import { redirectBack } from '@/utils';
const isDev = process.env.NODE_ENV === 'development';

export default {
  data() {
    return {
      num: 60,
      phone: isDev ? 17638190467 : '',
      code: isDev ? 3102 : ''
    };
  },
  methods: {
    checkPhone(phone) {
      if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(phone)) {
        console.log(1);
        return false;
      } else {
        return true;
      }
    },
    async getCode() {
      if (this.num !== 60) return;
      const { phone } = this;
      if (!this.checkPhone(phone)) {
        return wx.showToast({
          title: '请正确输入手机号',
          icon: 'none'
        });
      }
      await getCode(phone);
      this.startTimer();
    },
    startTimer() {
      this.clearTimer();
      if (this.num <= 1) {
        this.num = 60;
        return;
      }
      this.num -= 1;

      this.timer = setTimeout(() => {
        this.startTimer();
      }, 1000);
    },
    clearTimer() {
      if (this.timer) clearTimeout(this.timer);
    },
    async formSubmit(e) {
      const { phone, code } = e.target.value || {};
      if (!this.checkPhone(phone)) {
        return this.$toast('请正确输入手机号');
      }
      if (!code) return this.$toast('请输入验证码');
      wx.login({
        success: ({ code: wechat_code }) => {
          if (wechat_code) {
            // 开始登陆
            phoneLogin({ phone, code, wechat_code }).then(() => {
              this.$toast('登陆成功');
              // 重定向返回
              redirectBack();
            });
          } else {
            this.$toast('登陆失败');
          }
        },
        fail() {
          this.$toast('登陆失败');
        }
      });
    }
  },
  beforeDestory() {
    this.clearTimer();
  }
};
</script>

<style lang="scss" scoped>
.bind-container {
  height: 100vh;
}
.bind-wrap {
  height: 766rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 640rpx;
}
.logo {
  width: 310rpx;
  height: 100rpx;
  padding-bottom: 148rpx;
  text-align: center;
}
.form-item {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 2rpx solid #dfdfdf;
  position: relative;
  input {
    height: 100rpx;
    line-height: 100rpx;
    color: #666;
    font-size: 30rpx;
  }
}
.confirm-btn {
  margin-top: 65rpx;
  width: 650rpx;
  height: 86rpx;
  line-height: 1;
  border-radius: 43rpx !important;
  box-sizing: border-box;
  font-size: 32rpx;
  background-image: linear-gradient(
    -180deg,
    rgb(254, 28, 68) 0%,
    rgb(244, 19, 111) 100%
  );
  color: white;
  &.button-hover {
    opacity: 0.6;
  }
}
.get-code {
  background: white;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 30rpx;
  color: #666;
  height: 50rpx;
  border-left: 2rpx solid #dfdfdf;
  padding-left: 30rpx;
  z-index: 1000;
  width: 170rpx;
  text-align: center;
}
</style>
